<template>
  <div class="file_container">
    <div class="left_file_type">
      <img :src="fileTypeIcon" alt="" @error="imgError($event)">
    </div>
    <div class="right_file_wrap cursor_class" @click="handleClickToDetail">
      <div class="title_wrap">
        <div class="top_file_title text_ellipsis text_decoration">{{ title }}</div>
        <div class="ctime text_muted hidden-xs-only">{{ createTime }}</div>
      </div>
      <div class="bottom_file_content">
        <div class="quest_desc text_ellipsis text_muted">
          {{ description }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  View,
  Timer,
} from '@element-plus/icons-vue'
import { format } from 'path/posix'
import { computed, ref, toRefs } from 'vue'
import doc from '@/assets/images/DOC.png'
import excel from '@/assets/images/excel.png'
import pdf from '@/assets/images/pdf.png'
import txt from '@/assets/images/txt.png'
import zip from '@/assets/images/zip.png'
import { imgError } from '@/utils/imgError'
import noImg from '@/assets/images/noImg.png'
import router from '@/router'
const props = defineProps({
  id: {
    type: String || Number,
    default: '',
    require: true
  },
  title: {
    type: String,
    default: '',
    require: true
  },
  description: {
    type: String,
    default: ''
  },
  format: {
    type: String,
    default: '',
    require: true
  },
  createTime: {
    type: String,
    default: '',
    require: true
  }
})
const fileTypeIcon = computed(() => {
  const format = props.format
  let icon = noImg || undefined
  if (format === 'doc') {
    icon = doc
  } else if (format === 'zip' || format === 'rar' || format === '7z') {
    icon = zip
  } else if (format === 'xls') {
    icon = excel
  } else if (format === 'txt') {
    icon = txt
  } else if (format === 'pdf') {
    icon = pdf
  }
  return icon
})
const handleClickToDetail = () => {
  router.push({
    name: 'download-detail',
    params: {
      id: props.id
    }
  })
}
</script>

<style lang="scss" scoped>
.file_container {
  display: flex;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #eee;

  &:first-of-type {
    border-top: 0;
  }

  .left_file_type {
    min-width: 55px;
    width: 55px;
    height: 55px;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .right_file_wrap {
    overflow: hidden;
    flex: 1;

    .title_wrap {
      display: flex;
      justify-content: space-between;

      .top_file_title {
        color: #222226;
        font-weight: 700;
        font-size: 18px;
      }

      .ctime {
        margin-left: 20px;
        min-width: 112px;
      }
    }

    .bottom_file_content {
      .quest_desc {
        margin-top: 8px;
      }
    }
  }
}
</style>
